<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <script src="./bundle.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>

<body>
    <div id="App" class="container">
        <div class="page-header">
            <h1>Plupload wrapper for Vue 1.x <small>Example：</small></h1>
        </div>
        <div class="jumbotron">
            <vue-plupload @added="handleAdded" @progress="handleProgress" @error="handleError" @uploaded="handleUploaded" :options.sync="uploadOpt"></vue-plupload>
            <div class="btn-group">
                <button @click="setOption(1)" class="btn btn-default" type="button">With Params 1</button>
                <button @click="setOption(2)" class="btn btn-default" type="button">With Params 2</button>
                <button @click="setOption(3)" class="btn btn-default" type="button">With Params 3</button>
            </div>
        </div>
        <div class="form-group">
            <label>Log:</label>
            <pre>{{log}}</pre>
        </div>

    </div>
    <script>
        Vue.use(VuePlupload);
        var vm = new Vue({
            el: "#App",

            data: {
                uploadOpt: {
                    url: "http://posttestserver.com/post.php",
                    filters: {
                        max_file_size: '10mb',
                        mime_types: [{
                            title: "Image files",
                            extensions: "jpg,gif,png"
                        }]
                    },
                },
                log: ""
            },

            methods: {
                setOption : function(val) {
                    Vue.set(this.uploadOpt, "multipart_params", {test: val});
                },
                handleAdded: function (uploader, files) {
                    files.forEach(function (file) {
                        vm.log += "begin upload file:" + file.name + "\n";
                    });
                    uploader.start()
                },

                handleProgress: function (uploader, file) {
                    vm.log += "file:" + file.name + " uploading, progress:" + file.percent + "\n";
                },

                handleError: function (uploader, err) {
                    vm.log += "upload error:\n======\n" + JSON.stringify(err) + "\n======\n";
                },

                handleUploaded: function (uploader, file, result) {
                    vm.log += "file: " + file.name + " upload complete result: \n======\n" + result.response +
                        "\n======\n";
                }
            }
        });
    </script>
</body>

</html>